<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="lib/mCustomScrollbar/jquery.mCustomScrollbar.css">
</head>

<body>
    <div class="srcoll">
        <!-- nav -->
        <div class="container-fluid hand-nav">
            <div class="row">
                <div class="col-sm-5">
                    <div class="logo">
                        <img src="images/logo.png" alt="" class="center-block ">
                    </div>
                </div>
                <div class="col-sm-7">
                    <div class="col-sm-12 text-right ">
                        <a href="" class="weibo">
                            <img src="images/weibo.png" alt="">
                            诺丽美微博
                        </a>
                    </div>
                    <div class="col-sm-12 nav-con">
                        <a href="" class="nav-active">首页</a>
                        <a href="">关于诺丽美</a>
                        <a href="">最新动态</a>
                        <a href="">产品展示</a>
                        <a href="">专业课堂</a>
                        <form action="https://www.baidu.com/s?" method="GET" class="search">
                            <div>
                                <input type="text" name="word" placeholder="做女人要更美" required>
                                <button class="glyphicon glyphicon-search"></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- banner -->
        <div class="container-fluid banner">

            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">


                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="images/index-banner.gif" alt="...">
                    </div>
                    <div class="item">
                        <img src="images/index-banner.gif" alt="...">
                    </div>
                    <div class="item">
                        <img src="images/index-banner.gif" alt="...">
                    </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

        <!-- 商品 -->
        <div class="container-fluid show">
            <div class="row">
                <div class="col-sm-2 col-sm-offset-1">
                    <a href="javascript:;"><img src="images/index-show (1).gif" alt="" class="img-responsive"></a>
                </div>
                <div class="col-sm-2">
                    <a href="javascript:;"><img src="images/index-show (2).gif" alt="" class="img-responsive"></a>
                </div>
                <div class="col-sm-2">
                    <a href="javascript:;"><img src="images/index-show (3).gif" alt="" class="img-responsive"></a>
                </div>
                <div class="col-sm-2">
                    <a href="javascript:;"><img src="images/index-show (4).gif" alt="" class="img-responsive"></a>
                </div>
                <div class="col-sm-2">
                    <a href="javascript:;"><img src="images/index-show (5).gif" alt="" class="img-responsive"></a>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <div class="container foot">
            <div class="row">
                <div class="col-sm-7 ">
                    <img src="images/logo.png" alt="" class="img-responsive">
                </div>
                <div class="col-sm-5 foot-mess">
                    <a href="">联系我们</a>
                    <a href="">关于诺丽美</a>
                    <a href="">最新动态</a>
                    <a href="">产品展示</a>
                    <a href="">专业课堂</a>
                    <a href="">粤ICP备号12088417-1</a>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
    var h = $(window).height();
    $('.srcoll').css('height', h);
    $(".srcoll").mCustomScrollbar({
        theme: "dark",
        scrollButtons: {
            scrollInertia: 1000,
            mouseWheelPixels: 200,

        }
    });
</script>

</html>